<template>
  <div class="wft-lock">
    <div>
      <img src="../../assets/images/common/lock-icon.png" alt="">
      <el-input class="lockPasswdInp" v-show="!passwdError" ref="lockPasswdInpRef" size="small" show-password placeholder="密码" v-model="passwd">
        <template #append>
          <el-button @click="unLock()" :icon="Right"></el-button>
        </template>
      </el-input>
      <div class="passwdError-container" v-show="passwdError">
        <div class="passwdError">密码不正确。请再试一次。</div>
        <div class="confirm-btn" @click="reset()">确认</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed, onUnmounted, ref, nextTick } from 'vue'
import { KeyEventEnum, BaseEventEnum } from '@/enums'
import useCommonStore from '@/store/common';
import { Right } from '@element-plus/icons-vue'

let passwd = ref('')
let passwdError = ref(false)
let unlockKey = computed(() => import.meta.env.VITE_APP_UNLOCK_KEY)
let lockPasswdInpRef = ref()

onMounted(() => {
  reset()
  document.addEventListener(KeyEventEnum.ON_KEY_DOWN, keyDownHandle)
  document.addEventListener(BaseEventEnum.ON_CONTEXTMENU, contextmenuHandle)
})

onUnmounted(() => {
  document.removeEventListener(KeyEventEnum.ON_KEY_DOWN, keyDownHandle)
  document.removeEventListener(BaseEventEnum.ON_CONTEXTMENU, contextmenuHandle)
})

function reset() {
  passwdError.value = false
  passwd.value = ''
  nextTick(() => {
    lockPasswdInpRef.value.focus()
  })
}

// 解锁
function unLock() {
  if(passwd.value != unlockKey.value) {
    return passwdError.value = true
  }
  useCommonStore().updatelockTime(0)
}

// 监听鼠标按下事件，阻止 F12 事件
function keyDownHandle(event: KeyboardEvent) {
  if(event.key == 'Enter') {
    if(passwdError.value) {
      reset()
    } else {
      unLock()
    }
  }
  if(event.key == 'F12') {
    event.preventDefault()
  }
}
// 阻止鼠标右键事件
function contextmenuHandle(event: MouseEvent) {
  event.preventDefault()
}
</script>
<style scoped>
.wft-lock {
  width: 100vw;
  height: 100vh;
  background: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../../assets/images/common/lock-bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wft-lock > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.lockPasswdInp {
  margin-top: 8px;
}
 
.passwdError-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.passwdError {
  width: 260px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  margin: 10px 0;
}
 
.confirm-btn {
  width: 70px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  font-size: 13px;
  background-color: rgba(6, 14, 22, .5);
  border: 1px solid #0076c8;
  border-radius: 3px;
  cursor: pointer;
}
 
.confirm-btn:hover {
  background-color: rgba(6, 14, 22, .8);
}

:deep(.el-input__wrapper) {
  background-color: transparent!important;
  border: 1px solid #0076c8!important;
  box-shadow: 0 0 3px #0076c8!important;
}
:deep(.el-button) {
  background-color: rgba(6, 14, 22, .5)!important;
  /* border-color: 1px solid rgba(6, 14, 22, .5)!important; */
  border-color: transparent!important;
}
:deep(.el-input-group__append) {
  background-color: rgba(6, 14, 22, .5);
  /* border: 1px solid #0076c8; */
  border-color: transparent;
}
</style>